<template>
  <div
    :id="hasPreview ? info._id : `diy_${info._id}`"
    class="ui-line-chart h-full flex"
    :style="{
      width: '100%',
    }"
  >
    <div ref="chart1" :id="chartId1" class="w-1/2 h-full relative"></div>
    <div ref="chart2" :id="chartId2" class="w-1/2 h-full"></div>
    <div class="shipment-total total-chart1">
      <p class="title_">总数量</p>
      <p class="num_">{{ requestData1 }}</p>
    </div>
    <div class="shipment-total total-chart2">
      <p class="title_">总数量</p>
      <p class="num_">{{ requestData2 }}</p>
    </div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, ChartMixin } from '@ve/mixin'
  import cloneDeep from 'lodash/cloneDeep'
  import * as echarts from 'echarts'
  import { componentId } from '@/utils/unique'
  const newOption = {
    legend: {
      orient: 'vertical', // 图例排列方向
      bottom: 10, // 图例距离容器上边缘的距离
      left: 'center', // 图例距离容器左边缘的距离
      itemGap: 10, // 图例项间隔
      borderRadius: 4, // 图例项圆角
      icon: 'circle',
      textStyle: {
        color: '#fff', // 图例文本颜色
        fontFamily: 'Alibaba PuHuiTi', // 图例文本字体
        fontSize: 14, // 图例文本字体大小
        fontWeight: 400, // 图例文本字体粗细
      },
    },
    backgroundColor: 'rgba(255,255,255,0)',
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        itemStyle: {},
        center: ['50%', '50%'],
        data: [],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
      {
        // 不给name赋值，legend不会显示
        // name:'',
        type: 'pie',
        // 隐藏当前数据在tootip中的显示，外层需要给tootip才能生效
        tooltip: {
          show: false,
        },
        radius: '50%',
        center: ['50%', '50%'],
        label: {
          position: 'inside',
          formatter: '{d}%',
        },
        // 放在相关的组上
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
        // 数值随便给就行，为了宽度最小建议给1，这样渲染出来就不会占什么位子
        data: [],
      },
    ],
  }
  export default defineComponent({
    name: 'UiBydShipment',
    components: {},
    mixins: [UiMixin, ChartMixin],
    inject: {
      hasPreview: { default: false },
    },
    props: {
      info: {
        required: true,
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    data() {
      return {
        // infoComponent: {},
        // designByUser: [],
        // inter: null,
        // loopRequest: true,
        // loopTime: 5000,
        requestData1: 0,
        requestData2: 0,
        chartId1: 'chart',
        chartId2: 'chart',
      }
    },
    mounted() {
      this.chartId1 = componentId(6)
      this.chartId2 = componentId(6)
      this.$nextTick(() => {
        this.getRequestData1()
        this.getRequestData2()
      })
    },
    deactivated() {
      this.inter && clearInterval(this.inter)
    },
    beforeUnmount() {
      this.inter && clearInterval(this.inter)
    },
    methods: {
      getRequestData1() {
        this.getRequestData('wms.kanban.shipInfo.query', (res) => {
          this.requestData1 = this.sum(res)
          this.initChart1(res)
        })
      },
      sum(arr) {
        let sum = 0
        for (let i = 0; i < arr.length; i++) {
          sum = sum + arr[i].QTY
        }
        return sum
      },
      getRequestData2() {
        this.getRequestData('wms.kanban.shipInfo.month.query', (res) => {
          this.requestData2 = this.sum(res)
          this.initChart2(res)
        })
      },
      getRequestData(method, callback) {
        let obj = {
          requestSet: {
            api: '/wms/wms-web',
            method,
            getDataKey: method,
            loopRequest: false,
            loopTime: 3000,
            nameKey: '',
            valueKey: '',
            busList: [],
            dataObj: {},
            isJson: false,
            data: [
              {
                key: '#LIMIT#',
                value: '1',
              },
              {
                key: '#PAGE_SIZE#',
                value: '50',
              },
            ],
            resList: [],
          },
        }

        this.$request(obj.requestSet, (res) => {
          console.log('this.$request', res)
          callback(res)
          // this.requestData = res[0]
          // this.initChart(res)
        })
      },
      initChart(ref, res, id) {
        const newData = cloneDeep(res)
        newData.forEach((r) => {
          r.name = r.BASEINFO + ':' + r.QTY
          r.value = r.QTY
        })
        let chartDom = document.getElementById(id)
        let myChart = echarts.init(chartDom)
        let option = cloneDeep(newOption)
        if (ref === 'chart1') {
          option.title = {
            text: '周', // 饼图标题文本
            left: 'center', // 标题居中显示
            textStyle: {
              color: 'rgba(255, 255, 255,0.6)', // 标题字体颜色为黑色
              fontSize: 24, // 标题字体大小为24px
            },
            top: 10,
            backgroundColor: 'rgba(0, 144, 255, 0.0666666667)',
            borderRadius: [0, 15, 0, 15],
            padding: [15, 60],
          }
        } else {
          option.title = {
            text: '月', // 饼图标题文本
            left: 'center', // 标题居中显示
            textStyle: {
              color: 'rgba(255, 255, 255,0.6)', // 标题字体颜色为黑色
              fontSize: 24, // 标题字体大小为24px
              fontWeight: 'bold', // 标题字体加粗
            },
            top: 10,
            backgroundColor: 'rgba(0, 144, 255, 0.0666666667)',
            borderRadius: [0, 15, 0, 15],
            padding: [15, 60],
          }
        }
        option.series[0].data = newData
        option.series[1].data = newData
        console.log('option', option)
        option && myChart.setOption(cloneDeep(option), true)
        myChart.resize()
        // this.$nextTick(() => {
        //   myChart.resize()
        // })
        // setTimeout(function () {
        //   myChart.resize()
        // }, 300)
      },
      initChart1(res) {
        this.initChart('chart1', res, this.chartId1)
      },
      initChart2(res) {
        this.initChart('chart2', res, this.chartId2)
      },
    },
  })
</script>
<style lang="scss">
  .shipment-total {
    position: absolute;
    color: #fff;
    text-align: center;
    .title_ {
      line-height: 28px;
      font-size: 14px;
      font-family: 'MicrosoftYaHei', '微软雅黑', sans-serif;
      color: rgba(255, 255, 255, 0.6470588235294118);
    }
    .num_ {
      line-height: 28px;
      font-size: 24px;
      font-family: 'ArialMT', 'Arial', sans-serif;
      color: #ffd200;
    }
  }
  .total-chart1 {
    bottom: 10%;
    left: 6%;
  }
  .total-chart2 {
    bottom: 10%;
    left: 56%;
  }
</style>
